import Vue from 'vue'
import Vuex from 'vuex'
import { loginAPI } from '@/api/index'
import { getToken, removeToken, setToken } from '@/utils/ls'
// 变量 - 作用域链
// 对象的方法/属性 - 原型链

Vue.use(Vuex)

export default new Vuex.Store({
  // 定义数据
  state: {
    token: getToken() || ''
  },
  mutations: {
    setToken (state, token) {
      state.token = token
      // ls存一份
      setToken(token)
    },
    clearToken (state) {
      state.token = ''
      removeToken()
    }
  },
  actions: {
    async fetchLogin ({ commit }, form) {
      const res = await loginAPI(form)
      console.log(res)
      commit('setToken', res.data.token)
    }
  }
})

// 登录找到一个合适的地方 action函数执行起来 异步接口就调用了
// 使用vuex管理数据的通用模式
// 1. 使用vuex 从数据定义 -> 同步方法定义 -> 异步方法定义 action
// 2. 选择一个合适的时机位置 action成功执行起来 正确的传递参数即可
